<template>
  <div class="homeMain">
    <el-row style="margin: 20px 0">
      <el-col :span="5">
        <span class="demonstration" style="margin-right: 20px">游戏</span>
        <el-select v-model="value" placeholder="请选择">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
        </el-select>
      </el-col>
      <el-col :span="6">
        <span class="demonstration" style="margin-right: 20px">日期</span>
        <el-date-picker v-model="date" type="date" :value-format="valueFormat" placeholder="选择日期"> </el-date-picker>
      </el-col>
      <el-col :span="7">
        <div class="grid-content bg-purple-light">
          <span class="demonstration" style="margin-right: 20px">OpenID</span>
          <el-input style="width: 80%" size="medium" v-model="input" placeholder="请输入openid"></el-input>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple-light" style="padding-right: 20px">
          <el-button type="primary" @click="sousuo">搜索</el-button>
          <el-button type="danger" @click="logOut">退出</el-button>
        </div>
      </el-col>
    </el-row>

    <el-row style="margin: 20px 0">
      <el-col :span="8" style="font-size: 24px; font-weight: 700"> ecpm: {{ ecpm }} </el-col>
      <el-col :span="8" style="font-size: 24px; font-weight: 700"> 曝光PV： {{ total }} </el-col>
      <el-col :span="8" style="font-size: 24px; font-weight: 700"> 总收入： {{ totalCost }} </el-col>
    </el-row>

    <el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName">
      <el-table-column label="序号" type="index"> </el-table-column>
      <el-table-column prop="id" label="ID" width="180"> </el-table-column>
      <el-table-column prop="cost" sortable label="广告价值" width="180"> </el-table-column>
      <el-table-column prop="douyin_name" label="抖音昵称" width="180"> </el-table-column>
      <el-table-column label="抖音头像">
        <template slot-scope="scope">
          <img :src="scope.row.image" alt="图片" width="60" height="60" />
        </template>
      </el-table-column>
      <el-table-column prop="open_id" label="OpenId"> </el-table-column>
      <el-table-column prop="event_time" sortable label="广告时间" width="280"> </el-table-column>
      
      <el-table-column prop="brand" label="手机品牌" width="180"> </el-table-column>
      
    </el-table>
    <!-- @size-change="handleSizeChange"
       @current-change="handleCurrentChange"
       :current-page="currentPage"
       :page-size="pageSize"
        sizes, prev, pager, next, jumper
       -->
    <el-pagination :page-sizes="[500]" :current-page="currentPage" @current-change="handleCurrentChange" layout="total,sizes, prev, pager, next, jumper" :total="total" />
  </div>
</template>
   
<script>
export default {
  name: 'App',
  data() {
    return {
      options: [
        {
          value: '1',
          label: '',
        },
      ],
      currentPage: 1, // 当前页码
      value: '1',
      input: '',
      date: '',
      valueFormat: 'yyyy-MM-dd',
      tableData: [],
      total: 0,
      ecpm: '',
      totalCost: '',
      uuid: '',
    }
  },
  created() {
    const now = new Date()
    let currentYear = now.getFullYear()
    let currentMonth = (now.getMonth() + 1).toString().padStart(2, '0')
    let currentDay = now.getDate().toString().padStart(2, '0')
    this.date = `${currentYear}-${currentMonth}-${currentDay}`
  },
  mounted() {
    this.uuid = window.sessionStorage.getItem('token')
    this.options[0].label = window.sessionStorage.getItem('name')
    this.fetchData()
  },
  methods: {
    //退出登录
    logOut() {
      window.sessionStorage.clear()
      this.$router.push('/login')
    },
    tableRowClassName({ row, rowIndex }) {
      if (row.cost <= 1) {
        return 'success-01'
      } else if (row.cost > 1 && row.cost <= 5) {
        return 'success-15'
      } else if (row.cost > 5 && row.cost <= 10) {
        return 'success-510'
      } else if (row.cost > 10 && row.cost <= 15) {
        return 'success-1015'
      } else if (row.cost > 15 && row.cost <= 20) {
        return 'success-1520'
      } else if (row.cost > 20) {
        return 'success-2030'
      }
      // if (rowIndex === 1) {

      // } else if (rowIndex === 3) {
      //   return 'success-row';
      // }
      return ''
    },
    fetchData() {
      console.log(this.uuid)
      this.$http
        .post('index/ecpmDataList', {
          date: this.date,
          open_id: '',
          uuid: this.uuid,
          page_size: 500,
        })
        .then((res) => {
          console.log(res.data.data.ecpm, res.data.data.totalCost)
          this.total = res.data.data.count
          this.tableData = res.data.data.list

          if (this.uuid == 'bc9c147adca1aa31740b2504') {
            res.data.data.list.map((item) => {
              if (item.cost >= 50) {
                item.cost = item.cost * 0.6
                item.cost = Number(item.cost.toFixed(5))
              }
              return item
            })
          }
          this.ecpm = res.data.data.ecpm
          this.totalCost = res.data.data.totalCost
        })
    },
    //手动查询数据
    sousuo() {
      this.$http
        .get('index/ecpmDataList', {
          params: {
            date: this.date,
            open_id: this.input,
            uuid: this.uuid,
            page_size: 500,
            page: this.currentPage,
          },
        })
        .then((res) => {
          this.total = res.data.data.count
          this.tableData = res.data.data.list

          if (this.uuid == 'bc9c147adca1aa31740b2504') {
            res.data.data.list.map((item) => {
              if (item.cost >= 50) {
                item.cost = item.cost * 0.6
                item.cost = Number(item.cost.toFixed(5))
              }
              return item
            })
          }
          this.ecpm = res.data.data.ecpm
          this.totalCost = res.data.data.totalCost
        })
        .catch((error) => {
          console.error('Error fetching data:', error)
        })
    },
    //切换页码触发事件
    handleCurrentChange(e) {
      console.log(e)
      this.currentPage = e
      this.sousuo()
    },
  },
}
</script>
   
<style>
.homeMain {
  margin: 0 20px;
  min-width: 1400px;
}
.el-table .warning-01 {
  background: #c0c4cc;
}

.el-table .success-15 {
  background: #e4e7ed;
}
.el-table .success-510 {
  background: #f56c6c;
}
.el-table .success-1015 {
  background: #eb681c;
}
.el-table .success-1520 {
  background: #e2a851;
}
.el-table .success-2030 {
  background: #67c23a;
}
</style>
   